<template>
	<view style="background-color: #f3f3f3;	padding-bottom: 45rpx;">

		<cu-custom :bgColor="theme" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">返利列表</block>
		</cu-custom>

		<view class="search-all-wrap" style="background: #FFFFFF; padding-top: 10rpx;padding-bottom: 10rpx;">
			<view class="search-wrap">
				<image class="search_home" src="../../../static/search_home.png"></image>
				<input 
					v-model="sdata" 
					class="uni-input" 
					@input="onInput" 
					confirm-type="search" 
					placeholder=" 搜索 岗位"
					placeholder-style="color:#C7C7C7;" />
			</view>
		</view>
		
		<view class="content">
			<ren-dropdown-filter 
				:filterData='filterData' 
				:defaultIndex='defaultIndex'
				@onSelected='onSelected' 
				border = 'true'>
			</ren-dropdown-filter>
		</view>
		
		<view class="all_jobs">
			<view class="jobs_item" v-for="(item, index) in backinfoList"  :key="index">
				<view class="item_name_line">
					<view class="item_name" style="color: #000000;font-weight: bold;font-size: 30rpx;">岗位：{{item.zhaopindataGangwei}}</view>
					<view class="item_wage" style="font-weight: bold;font-size: 27rpx;">佣金：
					<text v-if="item.backinfoBeiyong == null">--</text>
					<text v-if="item.backinfoBeiyong != null">{{item.backinfoBeiyong}}</text>
					元</view>
				</view>
				<view class="item_company_line">
					<view class="company_name">{{item.zhaopindataQiye}}</view>
					<view class="clear"></view>
				</view>
				<view class="split_line" style="margin-bottom: 15rpx;" ></view>
				<view class="item_some_line">
					<view class="item_some" style="font-weight: bold;font-size: 27rpx;">报名：{{item.backinfoStuname}}</view>
					<view class="item_date" style="font-size: 27rpx;">{{item.backinfoPhonenumber}}</view>
				</view>
				<view class="split_line" style="margin-bottom: 15rpx;"></view>
				<view class="item_some_line">
					<view class="item_some" style="font-size: 27rpx;">状态：
						<text v-if="item.backinfoBeiyong2 == 0" style="color:#909399;">{{item.backinfoBeiyong2 | filterYongjinState}}</text>
						<text v-if="item.backinfoBeiyong2 == 1" style="color:#1890ff;">{{item.backinfoBeiyong2 | filterYongjinState}}</text>
						<text v-if="item.backinfoBeiyong2 == 2" style="color:#ff4949;">{{item.backinfoBeiyong2 | filterYongjinState}}</text>
						<text v-if="item.backinfoBeiyong2 == 3" style="color:#13ce66;">{{item.backinfoBeiyong2 | filterYongjinState}}</text>
					</view>
					<view class="item_date" style="font-size: 27rpx;">{{item.backinfoTime}}</view>
				</view>
			</view>		
		</view>
		
	</view>
</template>
<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	const app = getApp();
	export default {
		components: {
			RenDropdownFilter
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				filterData:[
						[
							{ text: '佣金状态', value: '' }, { text: '佣金待审核', value: 0 }, { text: '佣金待领取', value: 1 }, 
							{ text: '佣金领取失败', value: 2 },{ text: '佣金已结清', value: 3 }, 	
						]
				],
				defaultIndex:[0], // 默认选中条件索引
				
				backinfoList:[],
				gangweiSelect:"",
				yongjinstate:"",
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			//获取数据
			getData() {
				uni.request({
					url: app.globalData.serve_job_url + 'backinfoList',
					data: {
						"backinfoLianluoyuanId" : app.globalData.userinfo.llyId,
						"backinfoBeiyong2" : this.yongjinstate,
						"zhaopindataGangwei": this.gangweiSelect,
					},
					success: res => {
						this.backinfoList = res.data.rows;
					}
				});
			},
			// 搜索框查询
			onInput(e) {		
				this.gangweiSelect = e.detail.value;
				this.getData();
			},
			// 筛选条件
			onSelected(res){
				this.yongjinstate = (res[0])[0].value;
				this.getData();
			}
		},
		filters:{
			filterYongjinState(type){
				switch(type){
					case '0':
						return '佣金待审核'
						break;
					case '1':
						return '佣金待领取'
						break;
					case '2':
						return '佣金领取失败'
						break;
					case '3':
						return '佣金已结清'
						break;
				}
			}
		}
	}
</script>
<style>
	/* 大班课/内容列表公共样式 */
	@import url("/static/css/search/search.css");
	
	.content{
		height: 95rpx;
	}
	.all_jobs{
		width: 100%;
	}
	.jobs_item{
		position: relative;
		width: 100%;
		background: #FFFFFF;
		margin-top: 12rpx;
		padding: 20rpx 35rpx 8rpx 35rpx;
	}
	.all_jobs .jobs_item .item_name_line {
	    position: relative;
	    height: 55rpx;
	    line-height: 55rpx;
	}
	.all_jobs .jobs_item .item_name_line .item_name{
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #000000;
		font-size: 33rpx;
	}
	.all_jobs .jobs_item .item_name_line .item_wage{
		    position: absolute;
		    right: 2rpx;
		    top: 50%;
		    -webkit-transform: translate(0, -50%);
		    transform: translate(0, -50%);
		    color: #ffaf24;
		    line-height: normal;
			font-size: 25rpx;
	}
	.all_jobs .jobs_item .item_name_line .clear{
		clear: both;
		height: 0;
		font-size: 0;
		line-height: 0;
	}
	.all_jobs .jobs_item .item_some_line{
		position: relative;
	    height: 55rpx;
	    line-height: 55rpx;
		margin-bottom: 10rpx;
	}
	
	.all_jobs .jobs_item .item_some_line .item_some{
		height: 45rpx;
		line-height: 45rpx;
		color: #666666;
		font-size: 27rpx;
	}  
	.all_jobs .jobs_item .item_some_line .item_date{
		    position: absolute;
		    right: 2rpx;
		    top: 0;
		    height: 45rpx;
		    line-height:45rpx;
		    color: #999999;
			font-size: 23rpx;
	}
	.all_jobs .jobs_item .split_line{
		width: 100%;
		border-bottom: 2rpx solid #e2e2e2;
	}
	.all_jobs .jobs_item .item_company_line{
		position: relative;
		height: 55rpx;
		line-height: 55rpx;
		margin-top: 15rpx;
	}
	.all_jobs .jobs_item .item_company_line .company_name{
		display: block;
		float: left;
		height: 45rpx;
		line-height: 45rpx;
		text-decoration: none;
		color: #666666;
		font-size: 27rpx;
	}
</style>